<template>
  <div class="video-page">
    <div class="layout">
      <div class="page-content">
        <div class="video-player" v-if="playVideo">
          <div class="videoplayer" @click="flag=!flag">
            <video
              webkit-playsinline="true"
              playsinline=""
              x-webkit-airplay="deny"
              :src="playVideo.video.url"
              :poster="playVideo.video.imgUrl"
              autoplay=""
              preload="none"
              ref="video"
              @timeupdate="ontimeupdateFun"
              @loadeddata="onloadeddataFun"
              @ended="onendedFun"
            ></video>
            <div class="mark" v-if="nextflag"></div>
            <div class="next-preview-box" v-if="nextflag">
                <div class="next-desc">下一个视频</div>
                <div class="next-box">
                    <img :src="playVideo.video.imgUrl" alt="" class="img">
                    <div class="title-box">
                        <div class="title">{{playVideo.title}}</div>
                        <div class="play-btn" @click="nowPlay">立即播放</div>
                    </div>
                </div>
                    <div class="replay-box">
                        <img src="../assets/images/replay.png" alt="" class="img-replay">
                        <span>重播</span>
                    </div>
            </div>
            <div class="play-but" @click="play" v-if="playflag">
                <img src="../assets/images/24gf-playCircle.png" alt="">
            </div>
            <div :class="['control-bar' ,'control-bar-flex',{'hidden':flag}]">
                <div class="play-pause play" @click="togglePlay">
                    <img src="../assets/images/播放2.png" v-if="iconPlay" alt="">
                    <img src="../assets/images/播放暂停.png" v-if="!iconPlay" alt="">
                </div>
                <div class="step">
                    <van-slider 
                        v-model="currentPlay" 
                        bar-height="2px" 
                        active-color="#ee0a24" 
                        @input="sliderInputFun"
                        @drag-start="sliderDragStartFun"
                        @drag-end="sliderDragEndFun" 
                        />
                </div>
                <div class="timeline">
                    <span class="currentTime">{{timeLeft | playerTime}}</span>
                    <span class="duration">/{{timeRight | playerTime}}</span>
                </div>
                <div class="fullscreen"></div>
            </div>
          </div>
        </div>
        <div class="preview-play" v-if="playVideo">
            <div class="preview-nav">
                <div class="nav-item" @click="tabflag=!tabflag">
                    <div :class="['tab-name', {'tab-active':tabflag}]">简介
                    <div class="nav-active" v-if="tabflag"></div>
                    </div>
                </div>
                <div class="nav-item" @click="tabflag=!tabflag">
                    <div :class="['tab-name', {'tab-active':!tabflag}]">评论
                    <div class="nav-active" v-if="!tabflag"></div>
                    <div class="comment-total">{{playVideo.commentCount}}</div>
                    </div>
                </div>
            </div>
            <div class="preview-detail" v-if="tabflag">
                <div class="preview-title">
                    <div class="main-title">{{playVideo.title}}</div>
                    <div class="sub-title">
                        <span>{{playVideo.onlineTime | time}}</span>
                    </div>
                    <div class="icon-box">
                        <div class="box-item" @click="thumbsUp(playVideo.id)">
                            <img class="movie-img" v-if="!playVideo.alreadyUp" src="../assets/images/middle-1.png" alt="">
                            <img class="movie-img" v-if="playVideo.alreadyUp" src="../assets/images/alreadyUp.png" alt="">
                            <div>{{playVideo.upCount}}</div>
                        </div>
                        <div class="box-item" @click="tabflag=false">
                            <img class="movie-img" src="../assets/images/middle-2.png" alt="">
                            <div>{{playVideo.commentCount}}</div>
                        </div>
                        <div class="box-item">
                            <img class="movie-img" src="../assets/images/middle-3.png" alt="">
                            <div>435</div>
                        </div>
                        <div class="box-item">
                            <img class="movie-img" src="../assets/images/middle-4.png" alt="">
                            <div>1014</div>
                        </div>
                    </div>
                </div>
                <div class="video-container">
                    <div class="video-title">
                        《万里归途》全部视频
                    </div>
                    <section class="video-list" v-if="videolist">
                        <ul class="video-ul">
                            <div>
                                <li class="video-item" v-for="item in videolist" :key="item.id" @click="select(item.id)">
                                    <div class="inner">
                                        <div class="left-img">
                                            <img :src="item.video.imgUrl" alt="" class="movie-img">
                                            <span class="label">预告片</span>
                                            <span class="txt" v-if="item.id==playVideo.id">播放中</span>
                                            <!-- <span class="txt" v-if="item.id!=playVideo.id">{{timeRight | playerTime}}</span> -->
                                            <img src="../assets/images/playerIcon.png" alt="" class="player" v-if="item.id!=playVideo.id">
                                        </div>
                                        <div class="right-title">
                                            <div :class="['main-title', {'red-title':item.id==playVideo.id}]">
                                                {{item.title}}
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </div>
                        </ul>
                    </section>
                </div>
            </div>
            <div class="comment-container" v-if="!tabflag">
                <div v-if="commitlist">
                    <div class="comment-box" v-for="(item,index) in commitlist" :key="index">
                        <img :src="item.userInfo.avatar" alt="" class="avatar">
                        <div class="right">
                            <div class="top-box">
                                <div class="name-box">
                                    <span class="nick">{{item.userInfo.username}}</span>
                                    <div class="nick-level"></div>
                                </div>
                                <div class="time-box">
                                    <time>3小时前</time>
                                </div>
                                <div class="more-box">
                                    <img src="../assets/images/more.png" alt="" class="more-img">
                                </div>
                            </div>
                            <div class="content">{{item.content}}</div>
                            <!-- <div class="text-expander">
                                <div class="text-expander-content">
                                    <span class="ref-name">咔咔kopc：</span>
                                    现在穷的我 连看个电影都舍不得了 以前一个月得去二三次 哎
                                </div>
                            </div> -->
                            <div class="bottom">
                                <div class="appro-box">
                                    <img src="../assets/images/zan.png" alt="" class="zan-img">
                                    <span class="zan-span">赞</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
    <div class="bottom-comment" v-if="!tabflag">
        <div class="left-box" @click="showreplay=true">
            <div class="left-text">写评论…</div>
        </div>
    </div>
    <div class="replayCon" v-if="showreplay">
        <div class="write-comment-container">
            <textarea class="comment-area" placeholder="好看吗，快来写下你的感受吧～" v-model="keyword"></textarea>
        </div>
        <div class="split"></div>
        <div class="btn">
            <div class="cancel" @click="showreplay=false">取消评论</div>
            <div class="submit-false" @click="send">发布评论</div>
        </div>
    </div>
  </div>
</template>

<script>
import {getMovieDetail} from '../api/movie.js'
import {getCommitsData} from '../api/commit.js'
export default {
    data() {
        return {
            videolist: [],//视频列表
            playVideo:null,//当前播放视频
            playflag:false,
            iconPlay:false,
            nextflag:false,
            tabflag:true,
            flag:false,
            timeLeft:0,//左边时间
            timeRight:0,//右边时间
            currentPlay:0,
            videoIndex:0,
            showreplay:false,
            keyword:'',
            commitlist:null,
        };
    },
    methods: {
        // 获取视频
        getVideoFun(){
            getMovieDetail({movieId:this.$route.query.id}).then(data=>{
                this.videolist=[...data.feedVideos.feeds]
                if (this.$route.query.freedId) {
                    let index = this.videolist.findIndex(item=>item.id==this.$route.query.freedId)
                    this.videoIndex=index
                    this.playVideo=this.videolist[this.videoIndex]
                }
                // console.log(this.videoIndex);
                this.playVideo=this.videolist[this.videoIndex]
                // console.log(this.playVideo);
            })
        },
        //选择视频
        select(id){
            let index = this.videolist.findIndex(item=>item.id==id)
            this.videoIndex=index
            this.iconPlay=false
            // this.dzflag=false
            this.playVideo=this.videolist[index]
        },
        // 播放
        play(){
            this.playflag=false
            this.iconPlay=false
            setTimeout(() => {
                this.flag=true
            }, 4000);
            this.$refs.video.play()
        },
        // 播放暂停
        togglePlay(){
            if(this.iconPlay){//播放
                this.$refs.video.play();
                this.playflag=false
                this.ontimeupdateFun();
                this.flag=false
                setTimeout(() => {
                    this.flag=true
                }, 4000);
            }else{//暂停
                this.$refs.video.pause();
                this.playflag=true
                this.flag=true
                setTimeout(() => {
                    this.flag=false
                }, 4000);
            }
            this.iconPlay = !this.iconPlay;
        },
        //当前播放
        nowPlay(){
            this.nextflag=false
            this.iconPlay=false
            this.videoIndex+=1
            if (this.videoIndex>=this.videolist.length-1) {
                this.videoIndex=0
            }
            this.getVideoFun()
            this.$refs.video.play();
        },
        //视频时间进度变化
        ontimeupdateFun(){
            this.timeLeft = this.$refs.video.currentTime//实时获取视频播放时间
            this.currentPlay = 100*(this.timeLeft / this.timeRight);//// 计算进度条值
            
        },
        //等待mp4加载完
        onloadeddataFun(){
             this.timeRight = this.$refs.video.duration;//获取总时长
             
        },
        // 滚动条随时间实时变化
        sliderInputFun(value){
          let currentTime = (value/100)*this.timeRight
          this.timeLeft = currentTime
          this.$refs.video.currentTime = currentTime
        },
        //控制进度条开始与结束之间效果
        sliderDragStartFun(){
          this.$refs.video.pause();//暂停
          this.iconPlay=true
        },
        sliderDragEndFun(){
          this.$refs.video.play();//播放
          this.iconPlay=false
        },
        //视频播放完后
        onendedFun(){
            this.iconPlay=true
            this.flag=true
            this.nextflag=true
            this.dzflag=false
            this.$refs.video.pause();

            this.videoIndex+=1
            if (this.videoIndex>=this.videolist.length-1) {
                this.videoIndex=0
            }
            this.getVideoFun()
            
        },
        //点赞
        thumbsUp(id){
            let index = this.videolist.findIndex(item=>item.id==id)
            this.videolist[index].alreadyUp=!this.videolist[index].alreadyUp
            if (this.videolist[index].alreadyUp) {
               this.videolist[index].upCount = this.videolist[index].upCount+1
            }else{
                this.videolist[index].upCount = this.videolist[index].upCount-1
            }
        },
        //获取评论
        getCommitFun(){
            getCommitsData().then(data=>{
                // console.log(data);
                this.commitlist=data.list
            })
        },
        //评论
        send(){
            console.log(this.keyword);
            this.showreplay=false
            this.keyword=''
        },
    },
    created() {
        this.getVideoFun()
        this.getCommitFun()
        this.playflag=true
        this.iconPlay=false
    },
    // time
    filters:{
        time(value){
            var time = new Date(value)
            var y = time.getFullYear()
            var m = time.getMonth()+1<10?'0'+(time.getMonth()+1):time.getMonth()+1
            var d = time.getDate()<10?'0'+(time.getDate()):time.getDate()

            return `${y}-${m}-${d}`;
        },
        // 时长转换
        playerTime(data){
            let m = parseInt(data/60);//分钟
            let s = parseInt(data % 60);//秒
            if(m == 0 && s == 0){
              return "0:00";
            }else{
              return m +":"+ (s < 10?"0"+s:s);//0:01
            }
          }
    },
    watch:{
        "currentPlay":function () {
            this.playflag=false
            this.nextflag=false
        },
        "nextflag":function () {
            this.$refs.video.pause()
            this.playflag=true
        }
    }
};
</script>

<style lang="less" scoped>
.video-page {
    height: 100%;
    overflow-y: scroll;
  .layout {
    background-color: #f5f5f5;

    .page-content {
      padding-top: 56.25vw;
      position: relative;

      .video-player {
        position: fixed;
        z-index: 10;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 56.25vw;
        margin-top: -1px;

        .videoplayer {
          position: relative;
          overflow: hidden;
          z-index: -1;

          video{
            width: 100%;
            height: 100%;
            background-color: #000;
          }
          .play-but {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 58px;
            height: 58px;
            margin-left: -29px;
            margin-top: -29px;
            background-color: #fff;
            border-radius: 50%;
          }
          .control-bar-flex{
            height: 40px;
            display: flex;
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 40px;
            background-color: rgba(34,34,34,.9);
            transform: translateZ(0);
            color: #fff;
            
            .play-pause{
                float: none;
                height: 40px;
                width: 40px;
                line-height: 40px;
                text-align: center;

                &>img{
                    display: inline-block;
                    width: 10.5px;
                    height: 15.2px;
                }
            }
            .step{
                position: relative;
                left: 11px;
                flex: 1;
                margin-right: 10px;

            .background{
                position: absolute;
                top: 18px;
                width: 100%;
                height: 2px;
                background-color: #666;
            }
            .loaded{
                width: 72.8382%;
                position: absolute;
                top: 18px;
                width: 0;
                height: 2px;
                background-color: #ccc;
            }
            .current {
                width: 33.8235%;
                position: absolute;
                top: 18px;
                width: 0;
                height: 2px;
                background-color: #dd403b;
                transition: width 1s linear;

                .vernier{
                    position: absolute;
                    top: -10px;
                    right: -14px;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    background-color: #fff;
                    background-clip: padding-box;
                    border: 5px solid hsla(0,0%,100%,.6)!important;
                }
            }
            .current-pause{
                transition: none;
            }
            }
            .timeline{
                float: none;
                margin: 0 0 0 17px;
                line-height: 40px;
                font-size: 11px;
                .currentTime{
                    color: #eee;
                }
                .duration{
                    color: #999;
                }
            }
            .fullscreen{
                float: none;
                height: 40px;
                width: 15px;
            }
          }
          .control-bar.hidden{
                transform: translate3d(0,46px,0);
          }
          .mark{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.88);
          }
          .next-preview-box{
            position: absolute;
            left: 33px;
            right: 33px;
            top: 49px;
            font-size: 13px;

            .next-desc{
                color: hsla(0,0%,100%,.8);
            }
            .next-box{
                margin-top: 8px;
                display: flex;
                .img{
                    width: 120px;
                    height: 67px;
                    border-radius: 2px;
                }
                .title-box{
                    flex: 1;
                    margin-left: 12px;

                    .title{
                        color: #fff;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: normal;
                        word-break: break-all;
                    }
                    .play-btn{
                        box-sizing: border-box;
                        margin-top: 5px;
                        width: 74px;
                        height: 26px;
                        border: 1px solid #f03d37;
                        border-radius: 26px;
                        background: rgba(240,61,55,0);
                        color: #f03d37;
                        line-height: 26px;
                        text-align: center;
                    }
                }
            }
            .replay-box{
                margin-top: 23px;
                opacity: .8;
                display: flex;
                align-items: center;
                color: #fff;
                .img-replay{
                    width: 13px;
                    height: 13px;
                    margin-right: 5px;
                }
            }
          }
        }
      }
      .preview-play{
        margin-top: 0;
        background-color: #fff;

        .preview-nav {
            width: 100%;
            height: 38.5px;
            box-shadow: inset 0 0 0 0 #e8e8e8;
            border-bottom: 1px solid #e8e8e8;
            display: flex;
            align-items: center;
            background: #fff;
            position: fixed;
            top: 56vw;
            left: 0;
            z-index: 10;

            .nav-item{
                flex: 1;
                height: 38.5px;
                font-weight: 400;
                font-family: PingFangSC-Regular;
                font-size: 16px;
                color: #999;
                letter-spacing: 0;
                text-align: center;
                display: flex;
                justify-items: center;
                flex-direction: column;

                .tab-name{
                    height: 38.5px;
                    line-height: 38.5px;
                    position: relative;

                    .nav-active{
                        width: 19px;
                        height: 1.9px;
                        background: #f03d37;
                        border-radius: 1px;
                        position: absolute;
                        top: 36px;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                    .comment-total{
                        position: absolute;
                        left: 50%;
                        top: -5px;
                        font-weight: 400;
                        font-family: PingFangSC-Regular;
                        font-size: 11px;
                        color: #f03d37;
                        letter-spacing: 0;
                        text-align: center;
                        transform: translateX(20px);
                    }
                }
                .tab-active{
                    font-weight: 700;
                    font-family: PingFangSC-Medium;
                    color: #333;
                    font-size: 16px;
                }
            }
        }
        .preview-detail{
            margin-top: 35px;
            .preview-title{
                padding-top: 5px;
                font-size: 18px;
                margin: 0 15px;
                color: #333;
                font-family: PingFangSC-Medium;

                .main-title{
                    height: 51px;
                    line-height: 26px;
                    margin-top: 11.4px;
                    font-weight: 500;
                    font-family: PingFangSC-Medium;
                    font-size: 17px;
                    color: #333;                    
                }
                .sub-title{
                    height: 19.5px;
                    line-height: 19.5px;
                    margin-top: 7.3px;
                    font-weight: 400;
                    font-family: PingFangSC-Regular;
                    font-size: 13px;
                    color: #999;
                    letter-spacing: 0;
                }
                .icon-box{
                    display: flex;
                    margin-top: 28px;

                    .box-item{
                        flex: 1;
                        width: 28px;
                        height: 47px;
                        margin-right: 8px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        font-weight: 700;
                        font-family: PingFangSC-Medium;
                        font-size: 12px;
                        color: #666;

                        .movie-img{
                            width: 26px;
                            height: 26px;
                            margin-bottom: 5px;
                            background: #fff;
                        }
                        &>div{
                            height: 18px;
                            line-height: 18px;
                        }
                    }
                }
            }
            .video-container{
                margin-top: 25px;
                .video-title{
                    font-weight: 500;
                    font-family: PingFangSC-Medium;
                    font-size: 15px;
                    color: #333;
                    letter-spacing: 0;
                    line-height: 23px;
                    height: 23px;
                    padding-left: 15px;
                }
                .video-list{
                    background-color: #fff;

                    .video-ul{
                        margin: 0;
                        padding: 0;
                        background: #fff;

                        &>div{
                            .video-item{
                                height: 100px;
                                width: 100%;
                                display: flex;
                                align-items: center;
                                justify-items: center;
                                padding-left: 15px;
                                box-sizing: border-box;

                                .inner{
                                    border-bottom: 1px solid #e8e8e8;
                                    padding-right: 15px;
                                    height: 100px;
                                    width: 100%;
                                    display: flex;
                                    align-items: center;
                                    justify-items: center;

                                    .left-img{
                                        position: relative;
                                        height: 70px;
                                        font-weight: 500;
                                        font-family: PingFangSC-Medium;
                                        font-size: 11px;
                                        color: #fff;

                                        .movie-img{
                                            width: 124px;
                                            height: 70px;
                                            border-radius: 3px;
                                        }
                                        .label{
                                            color: #fff;
                                            position: absolute;
                                            left: 3px;
                                            top: 3px;
                                            height: 15px;
                                            padding: 1.5px;
                                            line-height: 15px;
                                            background: rgba(0,0,0,.75);
                                            border-radius: 2px;
                                            font-weight: 500;
                                            opacity: .9;
                                            font-size: 9px;
                                            vertical-align: middle;
                                            text-align: center;
                                        }
                                        .txt{
                                            position: absolute;
                                            top: 50px;
                                            left: 7px;
                                            color: #fff;
                                        }
                                        .player{
                                            width: 20px;
                                            height: 20px;
                                            position: absolute;
                                            left: 50%;
                                            top: 50%;
                                            transform: translate(-50%,-50%);
                                        }
                                    }
                                    .right-title{
                                        flex: 1;
                                        margin-left: 10px;

                                        .main-title  {
                                            font-weight: 500;
                                            font-family: PingFangSC-Medium;
                                            font-size: 15px;
                                            color: #333;
                                            letter-spacing: 0;
                                            line-height: 23px;
                                            display: -webkit-box;
                                            overflow: hidden;
                                            -webkit-line-clamp: 2;
                                            -webkit-box-orient: vertical;
                                        }
                                        .red-title{
                                            color: #f03d37;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .comment-container{
            width: 100%;
            box-sizing: border-box;
            overflow-x: hidden;
            padding-left: 15px;
            background: #fff;
            margin-top: 35px;

            .comment-box{
                margin-top: 26px;
                display: flex;
                align-items: flex-start;
                border-bottom: 1px solid #f5f5f5;

                .avatar{
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                    background-image: url('../assets/images/maouanloading.png');
                    background-repeat: no-repeat;
                    background-size: cover;
                    overflow: hidden;
                }
                .right {
                    flex: 1;
                    margin-left: 11px;
                    padding-bottom: 15px;
                    position: relative;

                    .top-box{
                        height: 35px;
                        position: relative;

                        .name-box{
                            display: flex;
                            height: 18px;
                            align-items: center;

                            .nick{
                                display: inline-block;
                                max-width: 150px;
                                color: #333;
                                font-size: 12px;
                                font-style: normal;
                                vertical-align: inherit;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                            }
                            .nick-level {
                                margin-left: 5px;
                                display: inline-block;
                                width: 36.5px;
                                height: 17px;
                            }
                        }
                        .time-box{
                            height: 18px;
                            position: absolute;
                            top: 21px;
                            font-weight: 400;
                            font-family: PingFangSC-Regular;
                            font-size: 12px;
                            color: #999;
                            letter-spacing: 0;
                            line-height: 18px;
                        }
                        .more-box{
                            position: absolute;
                            display: flex;
                            align-items: center;
                            width: 13px;
                            height: 17px;
                            right: 18px;
                            top: 12px;

                            .more-img{
                                width: 13px;
                                height: 3px;
                                background: none;
                            }
                        }
                    }
                    .content{
                        height: 21px;
                        margin-top: 6px;
                        font-family: PingFangSC-Regular;
                        font-size: 15px;
                        color: #333;
                        letter-spacing: 0;
                        text-align: justify;
                        line-height: 21px;
                        padding-right: 15px;
                    }
                    .text-expander{
                        cursor: pointer;
                        margin: 10px 15px 0 0;
                        background: #f5f5f5;
                        border-radius: 2px;
                        padding: 9px 8px;
                        font-family: PingFangSC-Regular;
                        font-size: 13px;
                        color: #2a2a2a;
                        text-align: justify;
                        line-height: 18px;

                        .text-expander-content{
                            max-height: 5000px!important;
                            overflow: hidden;
                            text-overflow: ellipsis;

                            .ref-name{
                                color: #4e759e;
                            }
                        }
                    }
                    .bottom{
                        margin-top: 15px;
                        height: 15px;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        padding-right: 15px;
                        font-family: PingFangSC-Regular;
                        font-size: 12px;
                        font-weight: 400;
                        color: #666;

                        .appro-box{
                            width: auto;
                            margin-right: 12px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .zan-img{
                                width: 15px;
                                height: 15px;
                                background: inherit;
                                margin-right: 3px;
                            }
                            .zan-span{
                                line-height: 15px;
                            }
                        }
                    }
                }
            }
            .comment-box:last-child{
                margin-bottom: 60px;
            }
        }
      }
    }
  }
  .bottom-comment{
    width: 100%;
    height: 50px;
    padding-bottom: 10px;
    background: #fff;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-items: center;
    align-items: center;
    z-index: 1;

    .left-box{
        display: flex;
        justify-items: flex-start;
        align-items: center;
        width: 90%;
        height: 34px;
        margin: 0 auto;
        background: #f5f5f5;
        border-radius: 18px;

        .left-text{
            font-weight: 400;
            font-family: PingFangSC-Regular;
            font-size: 13px;
            color: #666;
            letter-spacing: 0;
            line-height: 20px;
            margin-left: 15px;
        }
    }
  }
  .replayCon{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 999;
      .write-comment-container{
        padding: 15px;

        .comment-area{
            height: 239px;
            width: 100%;
            border: none;
        }
      }
      .split{
        height: 1px;
        transform: scaleY(.5);
        background: #e8e8e8;
      }
      .btn{
        text-align: end;
        padding-right: 15px;
        font-size: 13px;
        font-family: PingFangSC-Medium;
        margin-top: 15.5px;
        background: #fff;

        .cancel{
            display: inline-block;
            width: 72px;
            height: 30px;
            line-height: 30px;
            background: #d5d5d0;
            border-radius: 15px;
            color: #fff;
            text-align: center;
        }
        .submit-false{
            display: inline-block;
            width: 72px;
            height: 30px;
            margin-left: 15px;
            line-height: 30px;
            border-radius: 15px;
            color: #fff;
            text-align: center;
            background-image: linear-gradient(90deg,#faaf00,#ffbc20);
        }
      }

  }
  &::-webkit-scrollbar {
        display: none;
    }
}
::v-deep .van-slider{
    position: absolute;
    top: 18px;
    height: 2px;
    .van-slider__button{
        position: absolute;
        top: -10px;
        right: -14px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #fff;
        background-clip: padding-box;
        border: 5px solid hsla(0,0%,100%,.6)!important;
    }
}
</style>